<template>
  <div class="app-container user">
    <van-nav-bar title="心灵驿站" left-arrow @click-left="$router.back()" />
    <div class="content">
      <el-scrollbar>
        <div class="banner-box">
          <img class="banner" :src="require('@/assets/images/mindStation/banner.png')">
          <!-- <div class="tip">心理服务热线 : 400-850-2525</div> -->
        </div>
        <div class="module-box">
          <div class="module-item" v-for="item in moduleItemList" :key="item.label" @click="$router.push(item.path)">
            <img class="module-icon" :class="item.label" :src="require(`@/assets/images/mindStation/${item.icon}`)">
            <div class="module-label">{{ item.label }}</div>
          </div>
        </div>
        <div class="list-box column2">
          <div class="list-title">心理科普</div>
          <div class="list-content">
            <div class="list-item" v-for="(item, index) in listItemList" :key="index" @click="showVideoDialog(item)">
              <div class="item-cover">
                <svg-icon icon-class="play-fill" />
                <img class="cover-img" :src="item.cover">
              </div>
              <!-- <img class="item-cover" :src="require(`@/assets/images/mindStation/${item.cover}`)"> -->
              <div class="item-label">{{ item.label }}</div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <TabBar />
    <!-- 视频弹窗 -->
    <VideoDialog :visible.sync="videoDialogVisible" :params="videoDialogParams" />
  </div>
</template>

<script>
import TabBar from '@/views/mindStation/components/TabBar.vue';
import VideoDialog from '@/views/mindStation/components/VideoDialog.vue';
import { getVideoBase64 } from '@/utils/index.js';

export default {
  name: 'MindStationIndex',
  components: { TabBar, VideoDialog },
  data() {
    return {
      moduleItemList: [
        { label: '心理探针', path: '/mindStation/mindProbes', icon: 'MindProbes.png' },
        { label: '心理辅导', path: '/mindStation/mindCare', icon: 'MindCare.png' },
        { label: '心理科普', path: '/mindStation/mindClasses', icon: 'MindClasses.png' },
      ],
      listItemList: [
        {
          label: '如何预防避免焦虑发生',
          cover: '',
          videoSrc: 'http://183.56.241.175:9000/kfb/upload/laborUnion/video/如何预防避免焦虑发生.mp4',
        },
        {
          label: '如何预防避免抑郁发生',
          cover: '',
          videoSrc: 'http://183.56.241.175:9000/kfb/upload/laborUnion/video/如何预防避免抑郁发生.mp4',
        },
        {
          label: '职场阳光心态',
          cover: '',
          videoSrc: 'http://183.56.241.175:9000/kfb/upload/laborUnion/video/职场阳光心态.mp4',
        },
      ],
      videoDialogVisible: false,
      videoDialogParams: {},
    };
  },
  created() {
    this.listItemList.forEach((item) => {
      getVideoBase64(item.videoSrc).then((res) => {
        item.cover = res;
      });
    });
  },
  methods: {
    showVideoDialog(item) {
      this.videoDialogVisible = true;
      this.videoDialogParams = { src: item.videoSrc };
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/views/mindStation/index.scss';

.content {
  width: calc(100% - 30px);
  height: calc(100% - 110px);
  margin: 0 15px;

  ::v-deep .el-scrollbar {
    height: 100%;
  }

  .banner-box {
    position: relative;
    width: 100%;

    .banner {
      width: 100%;
    }
    .tip {
      position: absolute;
      top: 20px;
      width: 100%;
      text-align: center;
      color: #fff;
      text-shadow: 0px 4px 10px #f66b66;
    }
  }

  .module-box {
    width: calc(100% - 80px);
    padding: 15px 40px;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .module-item {
      text-align: center;
      cursor: pointer;

      .module-icon {
        width: 36px;
        height: 36px;
        &.心理辅导 {
          width: 32px;
          height: 32px;
        }
      }

      .module-label {
        font-size: 14px;
      }
    }
  }
}
</style>
